<template>
    <view class="contanier">
        <view class="edit-box">
            <view class="title">{{title}}</view>
            <view class="content">{{content}}</view> 
            <view v-if="type=='projectName'">
                <up-input v-model="inputValue" clearable />
            </view> 
            <view v-if="type=='projectQRCode'">
                <view class="project-title">项目：{{ projectStore.project.name }}</view>
                <view>
                    <up-qrcode size="200" val="uview-plus" showLoading loadingText="loading..."></up-qrcode>
                </view>
            </view> 
        </view>
        <view class="btn-confirm"> 
            <up-button type="success" color="#f8744d" @click="handlerConfirm">完成</up-button>
        </view>
    </view>
    
</template>

<script lang="ts" setup>
    import {
        ref,
        onMounted,
        getCurrentInstance
    } from 'vue';
    import { useProjectStore } from '../../../store/projectStore';

    const projectStore=useProjectStore()

    const editSettingOpt=ref({})

    const inputValue=ref("")

    const title=ref("")

    const content=ref("")

    const type=ref("")

    const instance=getCurrentInstance()?.proxy

    const eventChannel=instance.getOpenerEventChannel();

    const handlerConfirm=()=>{
        if(!editSettingOpt.value.confirm) uni.navigateBack()
        editSettingOpt.value.confirm(inputValue.value).then(res=>{
            uni.navigateBack()
        })
    }

    

    onMounted(()=>{

        eventChannel.on('toPageConfig', function(data) {

            console.log(data)
            
            editSettingOpt.value=data

            title.value=data.title
            content.value=data.content

            type.value=data.type

        })

    })

</script>

<style lang="scss">


    .edit-box{
        height: 80vh;
    }
    .contanier{
        text-align: center;
        font-size: 32upx;
        margin: 0 50px;
        .title{
            font-size: 36upx;
            font-weight: bold;
            margin-top: 92upx;
            margin-bottom: 48upx;
        }
        .content{
            margin-bottom: 40upx;
        }
    }
    .btn-confirm{
        display: inline-block;
        width: 60vw;
    }
    .project-title{
        margin-bottom: 20upx;
    }

</style>